<template>
  <div>
    <!-- 专题管理 -->
    <el-form
      :model="formData"
      inline
      style="display: flex; justify-content: flex-end; margin-top: 10px"
    >

      <el-form-item prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请输入专题标题"
        ></el-input>
      </el-form-item>

      <el-form-item prop="subtitle">
        <el-input
          v-model="formData.subtitle"
          placeholder="请输入子专题标题"
        ></el-input>
      </el-form-item>

      <el-form-item>

        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="openDialog('创建', 'add', null)" type="primary"
          >添加</el-button
        >
      </el-form-item>

    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" border >

      <el-table-column
        align="center"
        label="专题标题"
        prop="title"
      ></el-table-column>

      <el-table-column
        align="center"
        label="子专题标题"
        prop="subtitle"
      ></el-table-column>

      <el-table-column
        align="center"
        label="图片"
        prop="picUrl"
      >
      <template slot-scope="scope">
        <img :src="scope.row['picUrl']" style="width: 100px" />
      </template>
      </el-table-column>

      <el-table-column 
      align="center" 
      label="专题详情" 
      prop="contnet"
      >
      <el-button size="mini" type="primary">查看</el-button>
      </el-table-column>

      <el-table-column
        align="center"
        label="底价"
        prop="price"
      ></el-table-column>

      <el-table-column
        align="center"
        label="阅读量"
        prop="readCount"
      ></el-table-column>

      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="toDetailPage(scope.row)" type="primary"
            >详情</el-button
          >
          <el-button size="mini" type="primary">编辑</el-button>
          <el-button size="mini"  @click="deleteData(scope.row)"  type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
  
<script>
import axios from "axios";
export default {
  name: 'projectManagement',
  componentTitle: '专题管理',
  data () {
    return {
      tableLoading: false,
      dialogVisible: false,
      dialogTitle: "创建",
      dialogType: "add",
      dialogFormData: {
        question: "",
        answer: "",
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },
      formData:{
        title:'',
        subtitle:''
      },
    tableData: [],
      formRules: {
        question: [
          { required: true, message: "请输入问题", trigger: "change" },
        ],
        answer: [{ required: true, message: "请输入回答", trigger: "change" }],
      },
      typeOptions: [
        { label: "通用领券", value: 0 },
        { label: "注册赠券", value: 1 },
        { label: "注册码", value: 2 },
      ],
      statusOptions: [
        { label: "正常", value: 0 },
        { label: "已过期", value: 1 },
        { label: "已下架", value: 2 },
      ],
    };
  },

  mounted() {
    this.search();
  },

  filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },

  methods: {
    openDialog(title, type, row) {
      this.dialogVisible = true;
      this.dialogType = type;
      this.dialogTitle = title;

      if (type === "edit") {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row);
        });
      }
    },

    confirm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogType === "add") {
            this.addData();
          } else if (this.dialogType === "edit") {
            this.editData();
          }
        } else {
          return false;
        }
      });
    },

    cancel() {
      this.$refs.dialogForm.resetFields();
      this.dialogVisible = false;
    },

    // 添加接口
    addData() {
      axios({
        url: "http://192.168.200.251:8888/admin/issue/create",
        method: "post",
        data: {
          question: this.dialogFormData.question,
          answer: this.dialogFormData.answer,
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        if (res.data.errno === 0) {
          this.cancel();
          this.$notify.success({ title: "添加成功" });

          this.search();
        } else {
          this.$notify.error({ title: "添加失败" });
        }
      });
    },

    // 编辑接口
    editData() {
      axios({
        url: "http://192.168.200.251:8888/admin/issue/update",
        method: "post",
        data: {
          ...this.dialogFormData,
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        if (res.data.errno === 0) {
          this.cancel();
          this.$notify.success({ title: "编辑成功" });

          this.search();
        } else {
          this.$notify.error({ title: "编辑失败" });
        }
      });
    },

    // 路由跳转
    toDetailPage(row) {
      this.$router.push({
        path: "/couponManagement/detail",
        query: {
          id: row.id,
        },
      });
    },

    deleteData(row) {
      this.$confirm("此操作将删除该问题, 是否继续?").then(() => {
        axios({
          url: 'http://192.168.200.251:8888/admin/topic/delete',
          method: "post",
          data: row,
          headers: {
            "shopping-admin-token": sessionStorage.getItem(
              "shopping-admin-token"
            ),
          },
        }).then((res) => {
          this.$notify.success({ title: "删除成功" });

          this.search();
        });
      });
    },

    search() {
      this.tableLoading = true;

      axios({
        url: 'http://192.168.200.251:8888/admin/topic/list',
        method: "get",
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData,
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        this.tableLoading = false;
        this.tableData = res.data.data.list.map((item) => {
          return Object.assign({}, item, {
            test: "全场通用",
          });
        });

        this.pageInfo.total = res.data.data.total;
        console.log(res);
      });
    },

    // 每页多少条切换
    handleSizeChange(value) {
      this.pageInfo.limit = value;

      this.search();
    },

    // 当前页码的切换
    handleCurrentChange(value) {
      this.pageInfo.page = value;

      this.search();
    },
  },
};
</script>

